<template>
    <el-dialog v-model="show" title="成品组装" align-center @close="handleClose">
        <el-form ref="formRef" :model="formData">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="产品名称：">C款纯白不锈钢餐具套装</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="已完工数量：">100</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="已使用纸箱：">10</el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-form-item label="本次完工数量：">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="使用纸箱数：">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="箱规：">100个/箱</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-checkbox label="成品完全入库" />
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货损产品："><el-button type="success" plain
                            @click="add">添加</el-button></el-form-item>
                </el-col>
            </el-row>

            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="配件名称">
                    <template #default="scope">
                        <el-select v-model="scope.row.name" placeholder="please select your zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="本次货损数量">
                    <template #default="scope">
                        <el-input v-model="scope.row.quantity" type="number" />
                    </template>
                </el-table-column>
                <el-table-column label="货损原因">
                    <template #default="scope">
                        <el-select v-model="scope.row.reason" placeholder="please select your zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="责任人/供应商">
                    <template #default="scope">
                        <el-select v-model="scope.row.people" placeholder="please select your zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="货损产品单价">
                    <template #default="scope">
                        <el-input v-model="scope.row.unitPrice" type="number" />
                    </template>
                </el-table-column>
                <el-table-column label="货损产品总价" align="center">
                    <template #default="scope">
                        {{ scope.row.quantity && scope.row.unitPrice ? scope.row.quantity * scope.row.unitPrice : 0 }}
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #default="scope">
                        <el-button @click="tableData.splice(scope.$index, 1)" type="danger" icon="Minus" size="small"
                            circle />
                    </template>
                </el-table-column>
            </el-table>
        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">保 存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);
const formData = reactive({
    name: '',
})

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const tableData = ref([
    { name: '', quantity: '', reason: '', people: '', unitPrice: '' },
]);

const add = () => {
    tableData.value.push({ name: '', quantity: '', reason: '', people: '', unitPrice: '' });
};

const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>